<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>小米帐号登录</title>
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
    <link rel="stylesheet" href="../css/homework06.css">
    <link rel="stylesheet" href="http://at.alicdn.com/t/font_1066453_j5nmnh739ps.css">
</head>

<body>
    <!-- 顶部 -->
    <div class="top">
        <div class="top-body">
            <div class="logo">
                <img src="images/mi-logo.png" alt="">
            </div>
            <div class="top-text">
                <p>小米商城</p>
                <p>让每个人都能享受科技的乐趣</p>
            </div>
        </div>
    </div>

    <!-- 身体 -->
    <div class="body">
        <div class="login">
            <div class="check">
                <span class="active">
                    帐号登录
                </span> |
                <span>
                    扫码登录
                </span>   
            </div>
            <div class="body-content">
                <div class="account">
                    <div class="inp">
                        <span>
                        <input type="text" value="邮箱/手机号码/小米帐号" onfocus="this.value=''" onblur="this.value='邮箱/手机号码/小米帐号'">
                        </span>
                    <span>
                        <input type="text" value="密码" onfocus="this.value=''" onblur="this.value='密码'">
                    </span>
                   </div>
                   <button class="sure">登录</button>
                   <div class="reg">
                       <a href="#" style="color:#F56600;">手机短信登录/注册</a>
                       <a href="#">立即注册</a>|
                       <a href="#">忘记密码?</a>
                   </div>
<!-- 
                  <div class="other">
                        <fieldset class="item">
                                <legend align="center">其他方式登录</legend>
                              </fieldset> -->
                    <div class="other">
                    <p class="denglu">其他方式登录</p>
                    <div class="next">
                     <a href="#" style="background-color:#0288d1;"><i class="qq"></i></a>
                     <a href="#" style="background-color:#d32f2f;"><i class="weibo"></i></a>
                     <a href="#" style="background-color:#0ae;"><i class="zhifubao"></i></a>
                     <a href="#" style="background-color:#00d20d;"><i class="weixin"></i></a>
                     </div>
                 </div>
                </div>
                <div class="saoma">
                    <img src="../images/erwei.png" alt="">
                    <p style="font-size:14px;color:#BBB; margin-top:10px">使用 <a href="#">小米商城APP</a> 扫一扫</p>
                    <p style="font-size:14px;color:#BBB">小米手机可打开「设置」>「小米帐号」扫码登录</p>      
                </div>
             </div>
         </div>
     </div>

     <script>
        $(".check span").click(function() {
            $(this).addClass("active").siblings().removeClass("active");
            $(".body-content>div").eq($(this).index()).show().siblings().hide();
        })
    </script>

    <!-- 底部 -->
    <div class="bottom ">
        <div class="infor ">
            <a href="# ">简体&nbsp;&nbsp;&nbsp;</a>
            <a href="# ">|&nbsp;&nbsp;&nbsp;繁体&nbsp;&nbsp;&nbsp;</a>
            <a href="# ">|&nbsp;&nbsp;&nbsp;English&nbsp;&nbsp;&nbsp;</a>
            <a href="# ">|&nbsp;&nbsp;&nbsp;常见问题&nbsp;&nbsp;&nbsp;</a>
            <a href="# ">|&nbsp;&nbsp;&nbsp;隐私政策</a>
            <p>小米版权所有-京ICP备10046444- <img src="../images/警徽.png" alt=""> </i>京公网安备11010802020134号-京ICP证110507号</p>
        </div>

    </div>
</body>

</html>